if (jsq.Browser.IE) {
    jsq.gl=function(parent) {
                if (document.namespaces && !document.namespaces.v) {
                    document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
                    document.createStyleSheet().addRule("v\\:*", "behavior: url(#default#VML);");
                }
            var size={width:parent.offsetWidth,height:parent.offsetHeight};//$dom.getSize(parent);
               this.element=parent;
             this.size=size;
            this.initDrawText();
    };
    jsq.extend(jsq.gl.prototype,{
            element : null,
            x:0,
            y:0,
            brush:null,
            pen:null,
            
            moveTo : function(x,y) {this.x=x;this.y=y;},
            
            setBrush : function(br) {
                this.brush=br;
            },
            setPen : function(pen) {
                this.pen=pen;
            },
            
            clear : function() {
                this.element.innerHTML='';
                this.initDrawText();
            },
            
            // draw
            line : function(x1,y1,x2,y2) {
                var el=document.createElement('v:line');
                el.style.cssText = 'position: absolute;';
                el.from=x1+'px,'+y1+'px';
                el.to=x2+'px,'+y2+'px';
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                this.element.appendChild(el);
                this.x=x2;
                this.y=y2;
                el=null;
            },
            lineTo : function(x,y) { 
                this.line(this.x,this.y,x,y);
            },
            rect : function(x,y,width,height) {
                this._rect(x,y,width,height,'false');
            },
            fillRect : function(x,y,width,height) {
                this._rect(x,y,width,height,'true');
            },
            _rect : function(x,y,width,height,fill) {
                var el=document.createElement('v:rect');
                el.filled=fill;
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                if (this.brush) el.fillcolor=this.brush.getRGBStr();
                el.style.cssText = 'position: absolute;left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;';
                this.element.appendChild(el);
                this.x=x+width;
                this.y=y+height;
                el=null;
            },
            arc : function(x,y,width,height,startAngle,endAngle) {
                this._arc(x,y,width,height,startAngle,endAngle,'false');
            },
            fillArc : function(x,y,width,height,startAngle,endAngle) {
                this._arc(x,y,width,height,startAngle,endAngle,'true');
            },
            _arc : function(x,y,width,height,startAngle,endAngle,fill) {
                var el=document.createElement('v:arc');
                el.filled=fill;
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                if (this.brush) el.fillcolor=this.brush.getRGBStr();
                el.style.cssText = 'position: absolute;left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;';
                el.startangle=startAngle-90;
                el.endangle=endAngle-90;
                this.element.appendChild(el);
                this.x=x+width;
                this.y=y+height;
                el=null;
            },
            curve : function(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y) {
                this._curve(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y,'false');
            },
            fillCurve : function(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y) {
                this._curve(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y,'true');
            },
            _curve : function(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y,fill) {
                var el=document.createElement('v:curve');
                el.style.cssText = 'position: absolute;';
                el.filled=fill;
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                if (this.brush) el.fillcolor=this.brush.getRGBStr();
                el.from=x1+'px,'+y1+'px';
                el.to=x2+'px,'+y2+'px';
                el.control1=cp1x+'px,'+cp1y+'px';
                el.control2=cp2x+'px,'+cp2y+'px';
                this.element.appendChild(el);
                this.x=x2;
                this.y=y2;
                el=null;
            },
            curveTo : function(x,y,cp1x, cp1y, cp2x, cp2y) {
                this._curveTo(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y,'false');
            },
            fillCurveTo : function(x,y,cp1x, cp1y, cp2x, cp2y) {
                this._curveTo(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y,'true');
            },
            _curveTo : function(x,y,cp1x, cp1y, cp2x, cp2y,fill) {
                this._curve(this.x,this.y,x,y,cp1x, cp1y, cp2x, cp2y,fill);
            },
            roundRect : function(x,y,width,height,radius){
                this._roundRect(x,y,width,height,radius,'false');
            },
            fillRoundRect : function(x,y,width,height,radius){
                this._roundRect(x,y,width,height,radius,'true');
            },
            _roundRect : function(x,y,width,height,radius,fill){
                var el=document.createElement('v:roundrect');
                el.filled=fill;
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                if (this.brush) el.fillcolor=this.brush.getRGBStr();
                el.style.cssText = 'position: absolute;left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;';
                el.arcsize=((radius/Math.min(width,height))*100)+'%';
                this.element.appendChild(el);
                this.x=x+width;
                this.y=y+height;
                el=null;
            },
            ellipse : function(x,y,width,height) {
                this._ellipse(x,y,width,height,'false');
            },
            fillEllipse : function(x,y,width,height) {
                this._ellipse(x,y,width,height,'true');
            },
            _ellipse : function(x,y,width,height,fill) {
                var el=document.createElement('v:oval');
                el.filled=fill;
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                if (this.brush) el.fillcolor=this.brush.getRGBStr();
                el.style.cssText = 'position: absolute;left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;';
                this.element.appendChild(el);
                this.x=x+width;
                this.y=y+height;
                el=null;
            },
            polygon : function(arrPoints) {
                this._polygon(arrPoints,'false');
            },
            fillPolygon : function(arrPoints) {
                this._polygon(arrPoints,'true');
            },
            _polygon : function(arrPoints,fill) {
                var el=document.createElement('v:polyline');
                el.filled=fill;
                if (this.pen) el.strokecolor=this.pen.getRGBStr();
                if (this.brush) el.fillcolor=this.brush.getRGBStr();
                el.style.cssText = 'position: absolute;';
                var tmp='';
                for(var i=0;i<arrPoints.length;i++) {
                    if (i>0) tmp+=' ';
                    tmp+=arrPoints[i][0]+'px,'+arrPoints[i][1]+'px';
                }
                tmp+=' '+arrPoints[0][0]+'px,'+arrPoints[0][1]+'px';
                el.points=tmp;
                this.element.appendChild(el);
                this.x=arrPoints[0][0];
                this.y=arrPoints[0][1];
            }
    });
} else {
    jsq.gl=function(parent) {
            var size={width:parent.offsetWidth,height:parent.offsetHeight};//$dom.getSize(parent);
            var canvas = document.createElement("canvas");
            canvas.width  = size.width;
            canvas.height = size.height;
            parent.appendChild(canvas);
             this.element=parent;
             this.size=size;
            this.ctx = canvas.getContext('2d');
            this.initDrawText();
    };
    jsq.extend(jsq.gl.prototype,{
            ctx : null,
            x:0,
            y:0,
            radians_ramda : (Math.PI/180),
            
            moveTo : function(x,y) { this.ctx.moveTo(x,y);this.x=x;this.y=y;},
            // brush
            setBrush : function(br) {
                this.ctx.fillStyle = br.getRGBStr();
            },
            setPen : function(pen) {
                this.ctx.strokeStyle = pen.getRGBStr();
            },
            
            clear : function() {
                this.textEl.innerHTML='';
                this.ctx.clearRect(0,0,this.size.width,this.size.height);
            },
            
             // draw
            line : function(x1,y1,x2,y2) {
                this.ctx.beginPath();
                this.ctx.moveTo(x1,y1);
                this.ctx.lineTo(x2,y2);
                this.ctx.stroke();
                this.x=x2;
                this.y=y2;
            },
            lineTo : function(x,y) { 
                this.line(this.x,this.y,x,y);
            },
            rect : function(x,y,width,height) {
                this.ctx.beginPath();
                this.ctx.strokeRect(x,y,width,height);
                this.x=x+width;
                this.y=y+height;
            },
            fillRect : function(x,y,width,height) {
                this.ctx.fillRect(x,y,width,height);
                this.x=x+width;
                this.y=y+height;
            },
            _arc : function(x,y,width,height,startAngle,endAngle,fill) {
                this.ctx.beginPath();
                var r=width/2;
                x+=r;
                y+=height/2;
                if (width!=height) {
                    this.ctx.scale(1.0,height/width);
                    y*=(width/height);
                }
                this.ctx.arc(x,y,r,(startAngle-180)*this.radians_ramda,(endAngle-180)*this.radians_ramda,false);
                if (fill)  this.ctx.fill();
                this.ctx.stroke();
                if (width!=height) {
                    this.ctx.scale(1.0,width/height);
                }
                this.x=x+width;
                this.y=y+height;
            },
            arc : function(x,y,width,height,startAngle,endAngle) {
                this._arc(x,y,width,height,startAngle,endAngle,false);
            },
            fillArc : function(x,y,width,height,startAngle,endAngle) {
                this._arc(x,y,width,height,startAngle,endAngle,true);
            },
            _curve : function(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y,fill) {
                this.ctx.beginPath();
                this.ctx.moveTo(x1,y1);
                this.ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y,x2,y2);
                if (fill)  this.ctx.fill();
                else this.ctx.stroke();
                this.x=x2;
                this.y=y2;
            },
            fillCurve : function(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y) {
                this._curve(x1,y1,x2,y2,cp1x,cp1y,cp2x,cp2y,true);
            },
            curve : function(x1,y1,x2,y2,cp1x, cp1y, cp2x, cp2y) {
                this._curve(x1,y1,x2,y2,cp1x,cp1y,cp2x,cp2y,false);
            },
            curveTo : function(x,y,cp1x, cp1y, cp2x, cp2y) {
                this._curve(this.x,this.y,x,y,cp1x, cp1y, cp2x, cp2y,false);
            },
            fillCurveTo : function(x,y,cp1x, cp1y, cp2x, cp2y) {
                this._curve(this.x,this.y,x,y,cp1x, cp1y, cp2x, cp2y,true);
            },
            _roundRect : function(x,y,width,height,radius,fill){
                var x2=x+width;
                var y2=y+height;
                this.ctx.beginPath();
                this.ctx.moveTo(x,y+radius);
                this.ctx.lineTo(x,y2-radius);
                this.ctx.quadraticCurveTo(x,y2,x+radius,y2);
                this.ctx.lineTo(x2-radius,y2);
                this.ctx.quadraticCurveTo(x2,y2,x2,y2-radius);
                this.ctx.lineTo(x2,y+radius);
                this.ctx.quadraticCurveTo(x2,y,x2-radius,y);
                this.ctx.lineTo(x+radius,y);
                this.ctx.quadraticCurveTo(x,y,x,y+radius);
                if (fill)  this.ctx.fill();
                else this.ctx.stroke();
                this.x=x+width;
                this.y=y+height;
            },
            fillRoundRect : function(x,y,width,height,radius) {
                this._roundRect(x,y,width,height,radius,true);
            },
            roundRect : function(x,y,width,height,radius){
                this._roundRect(x,y,width,height,radius,false);
            },
            ellipse : function(x,y,width,height) {
                this._arc(x,y,width,height,0,360,false);
            },
            fillEllipse : function(x,y,width,height) {
                this._arc(x,y,width,height,0,360,true);
            },
            _polygon : function(arrPoints,fill) {
                this.ctx.beginPath();
                this.x=arrPoints[0][0];
                this.y=arrPoints[0][1];
                this.ctx.moveTo(this.x,this.y);
                for(var i=1;i<arrPoints.length;i++) {
                    this.ctx.lineTo(arrPoints[i][0],arrPoints[i][1]);
                }
                this.ctx.lineTo(this.x,this.y);
                if (fill)  this.ctx.fill();
                this.ctx.stroke();
            },
            polygon : function(arrPoints) {
                this._polygon(arrPoints,false);
            },
            fillPolygon : function(arrPoints) {
                this._polygon(arrPoints,true);
            }
    });
}

jsq.gl.Brush=function(r,g,b) {
            this.r=r?r:0;
            this.g=g?g:0;
            this.b=b?b:0;
};

jsq.extend(jsq.gl.Brush.prototype,{
        r:0,
        g:0,
        b:0,
        getRGBStr:function() {
            return 'rgb('+this.r+','+this.g+','+this.b+')';
        }
});

jsq.gl.Pen=function(r,g,b) {
            this.r=r?r:0;
            this.g=g?g:0;
            this.b=b?b:0;
};

jsq.extend(jsq.gl.Pen.prototype,{
        r:0,
        g:0,
        b:0,
        getRGBStr:function() {
            return 'rgb('+this.r+','+this.g+','+this.b+')';
        }
});

// 임시 draw text
    jsq.gl.prototype.initDrawText=function() {
        var el=document.createElement('div');
        el.id='_jsq_gl_text_canvas';
        this.element.appendChild(el);
        jsq.style.set(el,'position','absolute');
        jsq.style.set(el,'zIndex','9999');
        jsq.dom.setRect(el,0,0,this.size.width,this.size.height,this.element);
        this.textEl=el;
    };
    jsq.gl.prototype.drawText=function(x,y,width,height,text,styleText) {
        var el=document.createElement('div');
        this.textEl.appendChild(el);
        jsq.style.set(el,'position','absolute');
        jsq.dom.setRect(el,x,y,width,height,this.textEl);
        el.innerHTML='<span style="'+styleText+'">'+text+'</span>';
    };
    jsq.gl.prototype.drawHTML=function(x,y,width,height,html,id,className) {
        var el=document.createElement('div');
        this.textEl.appendChild(el);
        if (id) el.id=id;
        if (className) el.className=className;
        jsq.style.set(el,'position','absolute');
        jsq.dom.setRect(el,x,y,width,height,this.textEl);
        el.innerHTML=html;
    };

